<template>
	<view style="height: 100%;">
		<view class="view_box">
			<view class="view_box_view">
				<text class="my_apply_shop" @click="goApplyShop">我要开店</text>
				<view>
					<text style="font-size: 24px;font-weight: bold;">您好,</text>
				</view>
				<view class="">
					<text style="font-size: 24px;font-weight: bold;">欢迎来到吃了吗商家端</text>
				</view>
				<u-form style="margin-top: 20px;" :model="phoneLoginForm" ref="phoneLoginForm">
					<u-form-item borderBottom label="+86" label-width="85" prop="phone">
						<u-input type="number" border="none" v-model="phoneLoginForm.phone" />
						<u-button
							slot="right"
							@tap="getCode"
							:text="tips"
							type="success"
							size="mini"
							:disabled="disabled1"
						></u-button>
						<u-code
							ref="uCode"
							@change="codeChange"
							seconds="60"
							@start="disabled1 = true"
							@end="disabled1 = false"
						></u-code>
					</u-form-item>
					<u-form-item v-show="codeShow" borderBottom label="输入验证码" label-width="85" prop="code">
						<u-code-input v-model="phoneLoginForm.code" :maxlength="6"></u-code-input>
					</u-form-item>
					<u-form-item label-width="85" prop="hiddenPolicy">
						<u-radio-group v-model="phoneLoginForm.hiddenPolicy">
							<u-radio name="1">我同意
								<text style="color: #0BAFF5" @click="hiddenPolicyShow = true">《隐藏政策》</text>
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</u-form>
				<view style="margin-top: 20px;text-align: right;">
					<text>无法登录</text>
				</view>
				<view>
					<button class="login_btn" style="background-color: #0BAFF5;color: white;" @click="loginByPhoneRequest()" type="primary">登录/注册</button>
					<button class="login_btn" type="default" @click="goLoginByUser">账号密码登录</button>
				</view>
			</view>
		</view>
		<!-- 消息提示 -->
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<u-popup :show="hiddenPolicyShow" :round="10" mode="center" @close="hiddenPolicyClose">
			<view class="u-popup-slot">
				<h3>吃了么商家版隐私政策</h3>
				<br>
				<text>欢迎您使用我们的产品和服务！我们深知个人信息对您的重要性，您的信赖对我们非常重要，我们将严格遵守法律法规要求采取相应的安全保护措施，致力于保护您的个人信息安全可控。基于此，饿了么商家版服务提供者（或简称“我们”）制定本《饿了么商家版隐私政策》（下称“本政策”/“本隐私政策”），帮助您充分了解在您使用我们产品和服务的过程中，我们会如何收集、使用、共享、存储和保护您的个人信息以及您可以如何管理您的个人信息，以便您更好地作出适当的选择。

在您开始使用我们的产品和服务前，请您务必先仔细阅读和理解本政策，特别应重点阅读我们以粗体/粗体下划线标识的条款，确保您充分理解和同意之后再开始使用。本政策中涉及的专业词汇，我们尽量以简明通俗的表述向您解释，以便于您理解。如对本政策内容有任何疑问、意见或建议，您可通过本政策文末的联系方式与我们联系。

您同意隐私政策表示您已了解应用提供的功能，以及功能运行所需的必要个人信息，并给予相应的收集使用授权，但并不代表您已单独同意开启附加功能、处理非必要个人信息，相关附加功能的开启、处理非必要个人信息以及处理敏感个人信息，我们会根据您的实际使用情况单独征求您的同意。</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 手机号表单校验
				phoneRules: {
					phone: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					hiddenPolicy: [
						{
							required: true,
							message: '请勾选隐藏政策',
							trigger: ['change'],
						},
					],
				},
				// 账号表单
				phoneLoginForm: {
					// 手机号
					phone: '',
					// 验证码
					code: '',
					// manner格式
					manner: '',
					// 隐藏政策
					hiddenPolicy: ''
				},
				// 验证码输入框状态
				codeShow: false,
				tips: '发送验证码',
				disabled1: false,
				// 方式
				manner: '',
				// 隐藏政策 弹出框展示状态
				hiddenPolicyShow: false,
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.phoneLoginForm.setRules(this.phoneRules);
		},
		onLoad: function (option) {
			this.manner = option.manner
		},
		methods: {
			// 隐藏政策 弹框关闭触发方法
			hiddenPolicyClose() {
				this.hiddenPolicyShow = false
				// console.log('close');
			},
			// 去到申请开店页面
			goApplyShop () {
				uni.navigateTo({
					url: '/pages/shop/shop-apply'
				})
			},
			// 去到账号登录页面
			goLoginByUser(){
				if (this.manner === 'apply_shop') {
					uni.redirectTo({
						url: '/pages/login/loginByUser?manner=' + this.manner
					})
				} else {
					uni.redirectTo({
						url: '/pages/login/loginByUser'
					})
				}
			},
			// 定义消息提醒方法
			uNotify(message, type) {
				this.$refs.uNotify.show({
					top: 40,
					type: type,
					message: message,
					duration: 1000 * 3,
					fontSize: 20,
					safeAreaInsetTop:true
				})
			},
			// 根据 手机号验证登录
			loginByPhoneRequest () {
				this.$refs.phoneLoginForm.validate().then(valid => {
					if (this.phoneLoginForm.code == '') {
						this.uNotify("请输入验证码", 'warning')
					} else {
						this.$myRequest({
							url: '/shoplogin/loginByPhoneRequest',
							data: {
								phone: this.phoneLoginForm.phone,
								code: this.phoneLoginForm.code,
								manner: this.phoneLoginForm.manner
							}
						}).then(res => {
							if (res.data.flag) {
								if (this.manner === 'apply_shop') {
									// token
									uni.setStorageSync('token',res.data.obj.token)
									// 登录账号
									uni.setStorageSync('userName',res.data.obj.user.userName)
									// 用户昵称
									uni.setStorageSync('nickName',res.data.obj.user.nickName)
									// 用户性别
									uni.setStorageSync('sex',res.data.obj.user.sex)
									// 用户年龄
									uni.setStorageSync('age',res.data.obj.user.age)
									// 用户电话
									uni.setStorageSync('phone',res.data.obj.user.phone)
									// 用户邮箱
									uni.setStorageSync('mail',res.data.obj.user.mail)
									// 用户生日
									uni.setStorageSync('birthday',res.data.obj.user.birthday)
									// 用户头像id
									uni.setStorageSync('avatarId',res.data.obj.user.avatarId)
									// 用户角色
									uni.setStorageSync('role',res.data.obj.user.role)
									// 用户id
									console.log(uni.getStorageSync('id'))
									this.goApplyShop()
								} else if (res.data.obj.user.role != 2) {
									this.uNotify('你还不是商家，请申请开通店铺后登录', 'warning')
									this.popupShow = true
								} else {
									this.uNotify("登录成功", 'success')
									// token
									uni.setStorageSync('token',res.data.obj.token)
									// 登录账号
									uni.setStorageSync('userName',res.data.obj.user.userName)
									// 用户昵称
									uni.setStorageSync('nickName',res.data.obj.user.nickName)
									// 用户性别
									uni.setStorageSync('sex',res.data.obj.user.sex)
									// 用户年龄
									uni.setStorageSync('age',res.data.obj.user.age)
									// 用户电话
									uni.setStorageSync('phone',res.data.obj.user.phone)
									// 用户邮箱
									uni.setStorageSync('mail',res.data.obj.user.mail)
									// 用户生日
									uni.setStorageSync('birthday',res.data.obj.user.birthday)
									// 用户头像id
									uni.setStorageSync('avatarId',res.data.obj.user.avatarId)
									// 用户角色
									uni.setStorageSync('role',res.data.obj.user.role)
									// 用户id
									uni.setStorageSync('id',res.data.obj.user.id)
									uni.redirectTo({
										url: '/pages/shop/shop-select'
									})
								}
							} else {
								this.uNotify("验证码不正确，请重新发送", 'error')
							}
						})
					}
				})
			},
			// 发送验证码
			getCode() {
				this.$refs.phoneLoginForm.validate().then(valid => {
					if (valid) {
						// 手机号登录 btn状态
						this.phoneBtnShow = true
						// 验证码输入框 状态
						this.codeShow = true
						if (this.$refs.uCode.canGetCode) {
							// 模拟向后端请求验证码
							uni.showLoading({
								title: '正在获取验证码'
							})
							setTimeout(() => {
								this.$myRequest({
									url: '/shoplogin/shopLoginGoCode',
									data: {
										phone: this.phoneLoginForm.phone
									}
								}).then(res => {
									this.phoneLoginForm.manner = res.data.obj
								})
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							}, 2000);
						} else {
							uni.$u.toast('倒计时结束后再发送');
						}
					} else {
						console.log('发送验证码失败');
					}
				})
			},
			codeChange(text) {
				this.tips = text;
			},
		}
	}
</script>

<style scoped>
.view_box{
	width: 100%;
	height: 420px;
	overflow: hidden;
	display: flex;
	align-items: center;//垂直居中
}
.view_box_view{
	width: 90%;
	margin: 0 auto;
}
.my_apply_shop{
	float: right;
	overflow: ;
}
.my_apply_shop:active{
	color: #ff1b1b;
}
.login_btn{
	margin-top:20px;
}
.u-popup-slot {
	width: 200px;
	height: 350px;
	@include flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
	overflow: scroll;
}
</style>
